---
import type { Props } from '@astrojs/starlight/props';

import { Icon } from '@astrojs/starlight/components';
import Search from "@astrojs/starlight/components/Search.astro";
import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro";

import config from '../../config';

import HeaderLinks from "./HeaderLinks.astro";
---

<div class="header sl-flex">
  <div class="sl-flex">
    <SiteTitle {...Astro.props} />
  </div>
  <div class="middle-group">
    <div class="sl-flex">
      <HeaderLinks {...Astro.props} />
    </div>
  </div>
  <div class="sl-hidden md:sl-flex right-group">
    <a class="stars" href={config.github} target="_blank">
      <Icon name="github" size="1rem" /><span>{config.starsPlaceholder}</span>
    </a>
    <div class="button-group">
      <div class="search-options">
        <button class="ask-ai kapa-modal-open">
        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 256 256"><path fill="currentColor" d="m197.58 129.06l-51.61-19l-19-51.65a15.92 15.92 0 0 0-29.88 0L78.07 110l-51.65 19a15.92 15.92 0 0 0 0 29.88L78 178l19 51.62a15.92 15.92 0 0 0 29.88 0l19-51.61l51.65-19a15.92 15.92 0 0 0 0-29.88ZM140.39 163a15.87 15.87 0 0 0-9.43 9.43l-19 51.46L93 172.39a15.87 15.87 0 0 0-9.39-9.39l-51.46-19l51.46-19a15.87 15.87 0 0 0 9.39-9.39l19-51.46l19 51.46a15.87 15.87 0 0 0 9.43 9.43l51.46 19ZM144 40a8 8 0 0 1 8-8h16V16a8 8 0 0 1 16 0v16h16a8 8 0 0 1 0 16h-16v16a8 8 0 0 1-16 0V48h-16a8 8 0 0 1-8-8m104 48a8 8 0 0 1-8 8h-8v8a8 8 0 0 1-16 0v-8h-8a8 8 0 0 1 0-16h8v-8a8 8 0 0 1 16 0v8h8a8 8 0 0 1 8 8"/></svg>
          AI
        </button>
        <Search {...Astro.props} />
      </div>
      <a class="console" target="_blank" href="https://console.sst.dev">
        Console
      </a>
    </div>
    <!--
    <ThemeSelect {...Astro.props} />
    -->
  </div>
</div>

<style>
.header {
  gap: calc(var(--sl-nav-gap) + 0.5rem);
  align-items: center;
  height: 100%;
  justify-content: space-between;
}
@media (min-width: 50rem) {
  .header {
    gap: var(--sl-nav-gap);
  }
}

.header > div:first-child {
  flex: 0 0 auto;
}

.middle-group {
}
.middle-group > .sl-flex {
  justify-content: flex-end;
  gap: calc(var(--sl-nav-gap) + 0.5rem);
}
@media (max-width: 50rem) {
  :global(:root[data-has-sidebar]) {
    .middle-group > .sl-flex {
      display: none;
    }
  }
}
@media (min-width: 50rem) {
  .middle-group > .sl-flex {
    display: flex;
  }
}

.right-group {
  padding-left: 0.5rem;
  gap: var(--sl-nav-gap);
}
.stars {
  line-height: 1;
  text-decoration: none;
  border-radius: var(--border-radius);
  display: inline-flex;
  font-family: var(--sl-font-mono);
  gap: 0.3125rem;
  align-items: center;
  transition: all var(--color-transition);
}
.stars span {
  font-size: var(--sl-text-sm);
  color: var(--color-text-secondary);
}
.stars svg {
  color: var(--color-text-secondary);
}

.button-group {
  display: flex;
  gap: 0.625rem;
}

.search-options {
  display: flex;
  align-items: center;
}

.ask-ai {
  appearance: none;
  cursor: pointer;
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  border-style: solid;
  border-color: var(--divider-color);
  border-width: 1px 0 1px 1px;
  background-color: var(--sl-color-black-alpha);
  height: var(--search-button-height);
  font-size: var(--sl-text-xs);
  padding-inline: 0.625rem;
  color: var(--color-text-secondary);
  line-height: normal;
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  position: relative;
}
.ask-ai svg {
  position: relative;
  top: -1px;
}

.console {
  border-radius: var(--border-radius);
  border: 1px solid var(--divider-color);
  background-color: var(--sl-color-black-alpha);
  height: var(--search-button-height);
  font-size: var(--sl-text-xs);
  padding-inline: 0.75rem;
  color: var(--color-text-secondary);
  line-height: normal;
  display: flex;
  align-items: center;
  text-decoration: none;
}
@media (max-width: 56.25rem) {
  .console {
    display: none;
  }
}


@media (min-width: 50rem) {
  :global(:root[data-has-sidebar]) {
    --__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
  }
  :global(:root:not([data-has-toc])) {
    --__toc-width: 0rem;
  }
  .header {
    --__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
    --__main-column-fr: calc(
      (
          100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
            (2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
            var(--sl-content-width)
        ) / 2
    );
    display: grid;
    grid-template-columns:
      /* 1 (site title): runs up until the main content column’s left edge or the width of the title, whichever is the largest  */
      minmax(
        calc(var(--__sidebar-width) + max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))),
        auto
      )
      /* 2 (search box): all free space that is available. */
      1fr
      /* 3 (right items): use the space that these need. */
      auto;
    align-content: center;
  }
}
</style>
